<template>
  <div class="search-popup">
    <van-search
      v-model="searchVal"
      show-action
      :placeholder="placeholderVal"
      @search="onSearch"
      @cancel="onCancel"
      @input="onInput"
    />

    <HistoryHot
      v-if="blockShow == 1"
      :historyListData="historyListData"
      :hotKeywordListData="hotKeywordListData"
    />

    <SearchTipsList
      v-else-if="blockShow == 2"
      :searchTipsListData="searchTipsListData"
    />
    <Products v-else
    :filterCategory="filterCategory" 
    :goodsList="goodsList"
    />
  </div>
</template>

<script>
import {
  GetSearchPopupData,
  GetSearchTipsListData,
  GetGoodsListData,
} from "@/request/api";

import HistoryHot from "@/components/HistoryHot";
import SearchTipsList from "@/components/SearchTipsList";
import Products from "@/components/Products";
// import axios  from "axios"
// import {GetSearchPopupData} from "@/request/api"

export default {
  name: "Searchpopup",

  data() {
    return {
      //搜索的文字
      searchVal: "",

      // 占位符文本
      placeholderVal: "",
      //blockShow值可以为1和2
      // 为1 表示展示历史记录和热门搜索
      // 为2 表示展示搜索记录的列表
      // 为3 表示展示搜索的产品的内容

      blockShow: 3,
      //历史记录列表数据
      historyListData: [],
      //热门搜索列表数据
      hotKeywordListData: [],
      //搜索实时提示列表数据
      searchTipsListData: [],
        // 搜索产品内容的分类数据
        filterCategory:[],
        //搜索产品内容的列表数据
    goodsList:[]

    };
  },

  created() {
    GetSearchPopupData()
      // axios.get('http://kumanxuan1.f3322.net:8001/search/index')

      .then((res) => {
        // console.log(res);
        //   console.log(res.data);
        (this.placeholderVal = res.data.defaultKeyword.keyword),
          (this.historyListData = res.data.historyKeywordList),
          (this.hotKeywordListData = res.data.hotKeywordList);
      });
  },

  methods: {
    onSearch(val) {
      this.blockShow = 3;
      GetGoodsListData({ keyword: val }).then((res) => {
        if (res.errno == 0) {
          console.log(res.data);
        //   this.filterCategory=res.data.filterCategory,
        //   this.goodsList=res.data.goodsList,
        //  结构写法
        let {filterCategory,goodsList} =res.data;
        this.filterCategory=filterCategory
        this.goodsList=goodsList
        }
      });
      //用户搜索按下回车之后，val就是用户输入的值
    },
    onCancel() {
      //   console.log("onCancel");
      //   this.$router.push('/home')
      this.$router.go(-1); //返回上一级
    },
    onInput(val) {
      (this.blockShow = 2),
        //发送请求 获取实时搜索的文本提示的数据列表
        GetSearchTipsListData({ keyword: val }).then((res) => {
          if (res.errno == 0) {
            //   console.log(res.data);
            this.searchTipsListData = res.data;
          }
        });
    },
  },
  components: {
    HistoryHot,
    SearchTipsList,
    Products,
  },
};
</script>

<style lang="stylus" scoped>
.search-popup {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  // background: rgba(0,0,0,.5)
  background: #efefef;
}
</style>